<?php
$ci = &get_instance();
?>

<style>
    /*
        Flickr Gallery
    */
    .thumbs li{
         border:2px solid #fffff;
        
    }
    .thumbs li:hover{
         border:2px solid #ffa563;
        
    }
    .thumbs { margin: 0; padding: 0; overflow: hidden; }
    .thumbs li { list-style: none; float: left; margin: 5px; padding: 3px; background: #eee;  }
    .thumbs li a { }
    .thumbs li img { display: block; }
    .thumbs li a img { border: none;}

    #cycle { margin: 0; padding: 0; width: 500px; height: 333px; padding: 3px; background: #eee; -moz-box-shadow: 0 0 2px #000; -webkit-box-shadow: 0 0 2px #000;}
    #cycle li { position: relative; list-style: none; margin: 0; padding: 3px; width: 500px; height: 333px; overflow: hidden; }
    #cycle li div { position: absolute; bottom: 3px; left: 3px; padding: 3px; width: 494px; background: black; color: white; font-size: 12px; opacity: .8; }


    img {
        max-width: none;
    }

    .pasos{
        width: 100%;
        overflow:hidden;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .pasos ul{
        margin: 0;
        padding: 0;
        font: bold 14px Verdana;
        list-style-type: none;
        text-align: center; /* "left", "center", or "right" align menu */
    }

    .pasos li{
        display: inline;
        margin: 20px;
    }

    .pasos li a{
        display:inline-block;
        text-align:center;
        text-decoration: none;
        color: white;
        background:orange;
        margin: 0;
        margin-right:5px; /*right spacing between each link */
    }

    .paso_seleccionado{
        width:15px;
        height:15px;

    }

    .paso_no_seleccionado{
        width:5px;
        height:5px;
        border-radius: 100px; /*really large border radius to create round borders*/
        -moz-border-radius: 100px;
        -webkit-border-radius: 100px;
    }

    .pasos a span{
        position:relative;
        top:40%;
    }

    .pasos li a:visited{
        color: white;
    }

    .pasos a:hover{
        background: orange;
    }
    /*
    Boton Siguiente
    */
    .btn-siguiente {
        color: #FFFFFF;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        background-color: #FFA500;
        background-image: -moz-linear-gradient(top, #FFA500, #FFA500);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFA500), to(#FFA500));
        background-image: -webkit-linear-gradient(top, #FFA500, #FFA500);
        background-image: -o-linear-gradient(top, #FFA500, #FFA500);
        background-image: linear-gradient(bottom, #FFA501, #FFA500);
        background-repeat: repeat-x;
        border-color: #FFA500;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA500', endColorstr='#FFA500', GradientType=0);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    }
    .btn-siguiente:hover,
    .btn-siguiente:active,
    .btn-siguiente.active,
    .btn-siguiente.disabled,
    .btn-siguiente[disabled] {
        color: #FFFFFF;
        background-color: #FFA500;
    }
    .buscar-position{
        width: 100%;
        height: 50px;
    }
    #buscar_imagen{
        
        float:left;
    }
    #buscar_btn{
       margin-left: 5px;
height: 31px;
width: 41px;
        background-image: url('<? echo site_url('public/css/buscar.png') ?>');
    }
    
    #buscar_btn:hover{
        
         background-image: url('<? echo site_url('public/css/buscar-hover.png') ?>');
    }
    .buscador-img{
        float: right;
    }
    .contenedor-flick{
        float: left;
    }
    .titulo-buscar{
    margin-top: 10px;
float: left;
font-size: 14px;
font-weight: bold;
margin-left: 10px;
        color: #67717a;
    }
    .titulo{
        
    }
    .liseleccionar{
       cursor:pointer; 
        
    }
    .liseleccionar:hove{
        border: 2px solid black;
    }
    .titulo-curso-prev{
        font-size: 24px;
        margin-top: 10px;
       margin-left: 5px;
    }
    .desc-curso-prev{
        margin-left: 5px;
         font-size: 12px;
    }
    .prev-img{
        padding: 22px;
float: right;


padding-top: 14px;
border: 1px solid #d0d0d0;
border-radius: 2px;
        
    }
    .titulo-prev{
        margin-bottom: 10px;
    }
    .crop2{
        width: 240px;
height: 160px;
border: 1px solid #d0d0d0;
margin: 1%;
float: left;
margin: 1%;
overflow: hidden;
position: relative; 
    }
</style>

<div class="container contenido publica">
    <div class="pasos">
        <ul>
            <li><a href="<?php echo site_url('registro/tu_curso'); ?>" class="paso_no_seleccionado"><span></span></a></li>
            <li><a href="#" class="paso_seleccionado"><span></span></a></li>
            <li><a href="#" class="paso_no_seleccionado"><span></span></a></li>
        </ul>
    </div>
    <div style="text-align:center;"><span style="color:#514F4F; font-weight:regular;">Tu curso esta a un paso de ser publicado.</span><span style="color:#FFA563; font-weight: bold;"> Elegí la foto que lo representa.</span></div>
    <div class="row-fluid">
        <br>
        <br>
        <br>
    </div>
    <div style="float:left;width:40%;margin-left:2em;color:#67717a;">Seleccione el origen de su imagen</div>
  
    <div style=" float:left; width:55%; margin:0em 2em 2em 2em;border-radius: 2px;" >
        <div class="fila" style=" width:100%;border: 1px solid #d0d0d0;padding:20px;">
            <input type="submit" class="btn btn-siguiente" value="Imágenes prediseñadas" style="width:50%;font-weight:bold;" >
            <a class="btn" style="width:43%;" href="<?= site_url('registro/subir_imagen') ?>" target="_self">Subir Imagen de Mi PC </a>


        </div>
        <div class="fila" style="width:100%;padding:20px; float:left; border: 1px solid #d0d0d0; margin:-0.1em 0em 0em 0em;border-radius: 2px;">
            <div class="buscar-position">
             <div class="titulo-buscar">Imagenes sugeridas</div>  
             <div class="buscador-img">
              <input type="search" placeholder="" value="<?php echo $palabras_claves ?>" id="buscar_imagen"> 
              <div style="float:left ;text-align:right;cursor:pointer;" id="buscar_btn">   
                 
                 
                 
             </div>  
              
            </div>
            </div>  
                
            <div class="fila" style="float: left" > 
           
                <ul id="cbox" class="thumbs"></ul>

            </div>       
        </div>  


    </div>
    
    <div class="prev-img"  >
          <div class="titulo-prev" >Así se verá tu curso</div>
        <div id="loading_img" style="display:none"><b> Cargando foto... </b></div>
        <?php 
        $img_src = '';
        if ($this->session->userdata('foto_curso')) {
            $img_src = $this->session->userdata('foto_curso');
        } else {
            $img_src = base_url() . '/public/images/cursos/ed_fis_gde.jpg';
        }
        ?>
        <div class="crop2"><img src="<?php echo $img_src;?>"id="img_preview" /></div>
        


       
            <div class="fila titulo-curso-prev"  ><?php echo $titulo; ?></div>
            <div class="fila desc-curso-prev"> <?php echo $descripcion_corta; ?>.</div> 
   
    </div>

    <form id="form_publicar" class="form-horizontal publica-form" accept-charset="utf-8" method="post" action="<?php echo site_url('registro/cargar_instituto'); ?>">	
        <div style="float:right;width:55%;margin-left:2em;color:#67717a;">

            <a id="btn-paso2" class="btn btn-siguiente"href="<?= site_url('registro/cargar_instituto') ?>" target="_self">Siguiente </a>
            <!-- input de la foto -->
            <input type="file" style="visibility:hidden" id="img_pc" name="img_pc">            
            <input type="hidden" name="img_select" id="img_select" value="">
        </div>
    </form>

    <script>
   
        $('#cbox').jflickrfeed({
            limit: 24,
            qstrings: {
                tags : '<?php echo $this->session->userdata('palabras_claves'); ?>',
                tagmode: 'any'
            },
           itemTemplate: '<li class="liseleccionar"><img alt="{{title}}" src="{{image_s}}" name="{{image_m}}"  onclick="setImg(this)"  /></li>'
        
        }, function(data) {
         
        });
   
        $('#btn-subir-img').click(function() {
            $('#img_pc').click();
        });
	
        //Envio del Form
        $('#btn-paso2').click(function() {
        
            $('#form_publicar').submit();
            return false;
		
        }); //submit
	
	function buscarImgFlick(){
        
        
                $('#cbox').html("");
                $('#cbox').jflickrfeed({
                    limit: 24,
                    qstrings: {
                        tags : $('#buscar_imagen').val(),
                        tagmode: 'any'
                    },
                   itemTemplate: '<li><img alt="{{title}}" src="{{image_s}}" name="{{image_m}}"  onclick="setImg(this)"  /></li>'
                }, function(data) {
             
                });
        }
        $("#buscar_btn").click(function(e) {
       
         buscarImgFlick()
        
          });
        $("#buscar_imagen").keypress(function(e) {
            if(e.which == 13) {
       buscarImgFlick();
            }
        });

   
        function setImg(imagen) {
         
            $('#loading_img').show();
            $('#img_preview').attr('src',imagen.name);
            $('#img_select').val(imagen.name);
            $('#loading_img').hide();
        }
    </script>
